<template>
  <div class="content">
    <div class="contnet-left">
      <el-input placeholder="输入部门名称" v-model="filterText">
        <i slot="prefix" class="el-input__icon el-icon-search"></i>
      </el-input>
      <el-tree
        class="filter-tree"
        :data="options"
        :props="defaultProps"
        :filter-node-method="filterNode"
        @node-click="nodeClick"
        style="margin-top: 10px"
        accordion
        ref="tree"
      >
      </el-tree>
    </div>
    <div style="height: 100%; display: flex; flex-direction: column">
      <div class="people">
        <h4 style="text-align: left; color: #126bff; margin-bottom: 20px">
          用户管理
        </h4>
        <el-form
          id="punch"
          ref="elForm"
          :model="formData"
          size="medium"
          label-width="100px"
          style="overflow: hidden; display: flex; flex-wrap: wrap"
        >
          <el-form-item
            label="用户名:"
            prop="xm"
            style="width: 450px; float: left"
          >
            <el-input
              v-model="formData.user_name"
              placeholder="请输入用户名"
              clearable
              style="float: left; margin-left: 10px"
              :style="{ width: '300px' }"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="状态:"
            prop="status"
            style="width: 450px; float: left"
          >
            <el-select
              v-model="formData.freeze"
              placeholder="请选择状态"
              clearable
              style="float: left; margin-left: 10px; width: 300px"
            >
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item size="small " style="float: right">
            <el-button @click="resetForm()" id="reset">重置</el-button>
            <el-button
              type="primary"
              @click="submitForm(formData)"
              style="color: #ffffff; background-color: #126bff"
              >查询</el-button
            >
          </el-form-item> -->
          <div style="float: left">
            <el-button @click="resetForm()" id="reset">重置</el-button>
            <el-button
              type="primary"
              @click="submitForm(formData)"
              id="submitForm"
              >查询</el-button
            >
          </div>
        </el-form>
      </div>
      <div class="punch-content" style="width: 100%">
        <p class="content-top">
          <el-button
            type="primary"
            icon="el-icon-plus"
            @click="addPersonnelManagement"
            v-if="userInfo.resources.personnelManagementAddManagement"
            >添加用户</el-button
          >
          <el-button
            type="primary"
            icon="el-icon-delete-solid"
            v-if="userInfo.resources.personnelManagementDelete"
            @click="deleteTtem"
            >批量删除</el-button
          >
        </p>
        <el-table
          :data="tableData"
          style="width: 100%; border-radius: 10px"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="ex_avatar" label="头像">
            <template v-slot:default="scope">
              <img
                class="imgPhoto"
                style="width: 40px; height: 40px; border-radius: 50%"
                :src="scope.row.ex_avatar"
              />
            </template>
          </el-table-column>
          <el-table-column prop="ex_name" label="姓名"> </el-table-column>
          <el-table-column prop="ex_card_number" label="身份证号">
          </el-table-column>
          <el-table-column prop="ex_mobile" label="联系方式"> </el-table-column>
          <el-table-column prop="ex_freeze" label="状态">
            <template slot-scope="scope">
              <!-- {{ userInfo.user.id }} -->
              <el-switch
                v-model="scope.row.ex_freeze"
                active-color="#126BFF"
                active-text="正常"
                inactive-text="注销"
                :active-value="0"
                :inactive-value="2"
                @change="changeFreezeStatus(scope.row)"
              >
              </el-switch>
            </template>
          </el-table-column>

          <el-table-column prop="re_update" label="创建时间"> </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                @click="detailHandleClick(scope.row)"
                v-if="userInfo.resources.personnelManagementDetail"
                type="text"
                size="small"
                >详情</el-button
              >
              <el-button
                type="text"
                size="small"
                v-show="scope.row.ex_name != '超级管理员'"
                v-if="userInfo.resources.personnelManagementEdit"
                @click="editHandleClick(scope.row)"
                >编辑</el-button
              >
              <el-button
                type="text"
                size="small"
                v-show="scope.row.ex_name != '超级管理员'"
                v-if="userInfo.resources.personnelManagementResetPwd"
                @click="resetPwd(scope.row)"
                >重置密码</el-button
              >
              <!-- v-if="userInfo.resources.personnelManagementDelete" -->

              <el-button
                type="text"
                size="small"
                style="color: #ff4444"
                v-show="scope.row.ex_name != '超级管理员'"
                v-if="userInfo.resources.personnelManagementDelete"
                @click="deleteItem(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30]"
          :page-size="pageSize"
          layout="total, prev, pager, next, sizes"
          :total="total"
          style="float: right; margin-top: 20px"
        >
        </el-pagination>
      </div>
      <!-- 详情弹窗 -->
      <div id="dialog">
        <el-dialog
          title="详情"
          :visible.sync="dialogVisible"
          width="550px"
          top="0"
          style="border-radius: 20px"
        >
          <div style="display: flex; flex-wrap: wrap; text-align: left">
            <div class="upIpfo">
              <p>部门:{{ detaile.ex_department_name }}</p>
              <p>姓名:{{ detaile.ex_name }}</p>
            </div>
            <div class="upIpfo">
              <p>身份证号：{{ detaile.ex_card_number }}</p>
              <p class="text">角色:{{ detaile.roles_name }}</p>
            </div>
            <div class="upIpfo">
              <p class="text">联系方式:{{ detaile.ex_mobile }}</p>
              <p>
                照片：
                <img
                  style="width: 50px; height: 50px; vertical-align: text-top"
                  :src="detaile.ex_avatar"
                  alt=""
                />
              </p>
            </div>
            <div class="upIpfo">
              <p>添加时间:{{ detaile.re_update }}</p>
            </div>
          </div>
        </el-dialog>
        <!-- 添加 -->
        <el-dialog
          :title="title"
          :visible.sync="addVisible"
          width="960px"
          top="0"
          style="border-radius: 20px"
          :close-on-click-modal="model"
        >
          <div style="text-align: left">
            <el-form ref="form" :model="form" :rules="rules">
              <p class="item">
                <el-form-item label="部门：" prop="ex_department_id">
                  <el-cascader
                    ref="xzCascade"
                    placeholder="请选择部门"
                    :options="optionsOne"
                    :props="{ checkStrictly: true }"
                    filterable
                    :emitPath="emitPath"
                    clearable
                    style="float: left"
                    :show-all-levels="false"
                    v-model="form.ex_department_id"
                    @change="handleChangexz"
                    getCheckedNodes
                    :style="{ width: '300px' }"
                  ></el-cascader>
                </el-form-item>
                <el-form-item label="姓名：" prop="ex_name">
                  <el-input
                    placeholder="请输入姓名"
                    v-model="form.ex_name"
                  ></el-input>
                </el-form-item>
              </p>
              <p class="item">
                <el-form-item label="身份证号：" prop="ex_card_number">
                  <el-input
                    placeholder="请输入身份证号"
                    v-model="form.ex_card_number"
                  ></el-input>
                </el-form-item>
                <el-form-item label="登录密码：" prop="ex_password">
                  <el-input
                    placeholder="请输入登录密码"
                    v-model="form.ex_password"
                  ></el-input>
                </el-form-item>
              </p>
              <p class="item">
                <el-form-item label="角色：" prop="ex_role_id">
                  <el-select
                    v-model="form.ex_role_id"
                    clearable
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in roleList"
                      :key="item.ro_id"
                      :label="item.ro_name"
                      :value="item.ro_id"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="联系方式：" prop="ex_mobile">
                  <el-input
                    placeholder="请输入联系方式"
                    v-model="form.ex_mobile"
                  ></el-input>
                </el-form-item>
              </p>
              <p class="item">
                <el-form-item label="头像：" prop="ex_avatar">
                  <el-upload
                    class="avatar-uploader"
                    action=""
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
                <el-form-item> </el-form-item>
              </p>
            </el-form>
          </div>
          <div style="float: right; margin-top: 50px">
            <el-button @click="handleClose('form')" id="reset">取消</el-button>
            <el-button type="primary" @click="confirm('form')" id="submitForm"
              >确定</el-button
            >
          </div>
        </el-dialog>
        <!-- 编辑 -->
        <el-dialog
          title="编辑用户"
          :visible.sync="editVisible"
          width="960px"
          top="0"
          style="border-radius: 20px"
          :close-on-click-modal="model"
        >
          <div style="text-align: left">
            <el-form ref="form" :model="editForm" :rules="rules">
              <p class="item">
                <el-form-item label="部门：" prop="ex_department_id">
                  <el-cascader
                    ref="xzCascade"
                    placeholder="请选择部门"
                    :options="optionsOne"
                    :props="{ checkStrictly: true }"
                    filterable
                    :emitPath="emitPath"
                    clearable
                    style="float: left"
                    :show-all-levels="false"
                    v-model="editForm.ex_department_id"
                    @change="handleChangexz"
                    getCheckedNodes
                    :style="{ width: '300px' }"
                  ></el-cascader>
                </el-form-item>
                <el-form-item label="姓名：" prop="ex_name">
                  <el-input
                    placeholder="请输入姓名"
                    v-model="editForm.ex_name"
                  ></el-input>
                </el-form-item>
              </p>
              <p class="item">
                <el-form-item label="身份证号：" prop="ex_card_number">
                  <el-input
                    placeholder="请输入身份证号："
                    v-model="editForm.ex_card_number"
                  ></el-input>
                </el-form-item>
                <el-form-item label="角色：" prop="ex_role_id">
                  <el-select
                    v-model="editForm.ex_role_id"
                    clearable
                    placeholder="请选择"
                  >
                    <template v-for="item in roleList">
                      <el-option
                        :key="item.ro_id"
                        :label="item.ro_name"
                        :value="item.ro_id"
                      >
                        <template>
                          <span>{{ item.ro_name }}</span>
                        </template>
                      </el-option>
                    </template>
                  </el-select>
                </el-form-item>
              </p>
              <p class="item">
                <el-form-item label="联系方式：" prop="ex_mobile">
                  <el-input
                    placeholder="请输入联系方式"
                    v-model="editForm.ex_mobile"
                  ></el-input>
                </el-form-item>
                <el-form-item label="头像：" prop="ex_avatar">
                  <el-upload
                    class="avatar-uploader"
                    action=""
                    :show-file-list="false"
                    :on-success="handleAvatarSuccess"
                    :before-upload="beforeAvatarUpload"
                  >
                    <img v-if="imageUrl" :src="imageUrl" class="avatar" />
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                  </el-upload>
                </el-form-item>
              </p>
            </el-form>
          </div>
          <div style="float: right; margin-top: 50px">
            <el-button @click="handleClose('form')" id="reset">取消</el-button>
            <el-button
              type="primary"
              @click="editConfirm('form')"
              id="submitForm"
              >确定</el-button
            >
          </div>
        </el-dialog>
        <!-- 重置密码弹窗 -->
        <el-dialog
          title="重置密码"
          :visible.sync="resetVisible"
          width="430px"
          top="0"
          style="border-radius: 20px"
          :close-on-click-modal="model"
        >
          <div style="text-align: left">
            <p>确定要将用户名密码设置为： 123456</p>
          </div>
          <div style="float: right; margin-top: 50px">
            <el-button @click="resetVisible = false" id="reset">取消</el-button>
            <el-button type="primary" @click="confirmReset" id="submitForm"
              >确定</el-button
            >
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
import { Loading } from "element-ui";
import { department } from "@/api/departant";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { searchAdminRolePage } from "@/api/role";
import {
  addAdminUser,
  searchAdminUserPage,
  detailsAdminUser,
  editAdminUser,
  deleteAdminUser,
  editPasswrod,
  changeFreeze,
} from "@/api/user";
// import { compressBase64 } from "@/utils/index";
// import
export default {
  name: "punchLog",
  data() {
    var ex_nameVal = (rule, value, callback) => {
      // console.log(value);
      if (value === "") {
        callback(new Error("请输入姓名"));
      } else {
        callback();
      }
    };
    var ex_passwordVal = (rule, value, callback) => {
      // console.log(value);
      if (value === "") {
        callback(new Error("请输入登录密码"));
      } else {
        callback();
      }
    };
    var ex_mobileVal = (rule, value, callback) => {
      const reg = /^1[3456789]\d{9}$/;
      // console.log(value);
      // console.log(reg.test(value));
      if (value === "") {
        callback(new Error("请输入手机号"));
      } else if (!reg.test(value)) {
        callback(new Error("请输入正确的11位手机号"));
      } else {
        callback();
      }
    };
    var ex_role_idVal = (rule, value, callback) => {
      // console.log(value);
      if (value === "") {
        callback(new Error("请选择角色"));
      } else {
        callback();
      }
    };
    var ex_department_idVal = (rule, value, callback) => {
      // console.log(value);
      if (value === "") {
        callback(new Error("请选择部门"));
      } else {
        callback();
      }
    };
    return {
      total: null,
      userInfo: JSON.parse(localStorage.getItem("userInfo")),
      addVisible: false,
      editVisible: false,
      resetVisible: false,
      model: false,
      filterText: null,
      title: "添加用户",
      statusOptions: [
        {
          value: 0,
          label: "正常",
        },
        {
          value: 2,
          label: "注销",
        },
      ],
      // 左侧部门列表
      options: [],
      form: {
        ex_name: "",
        ex_department_id: "",
        ex_card_number: "",
        ex_password: "",
        ex_role_id: "",
        ex_mobile: "",
        ex_avatar: "",
      },
      editForm: {
        ex_name: "",
        ex_department_id: "",
        ex_card_number: "",
        ex_password: "",
        ex_role_id: "",
        ex_mobile: "",
        ex_avatar: "",
      },
      imageUrl: "",
      defaultProps: {
        children: "children",
        label: "label",
      },
      // 级联选择框
      emitPath: false,
      selectId: {
        dpid: "",
      },
      optionsOne: [],
      currentPage4: 4,
      currentPage: 1,
      pageSize: 4,
      // 条件搜索表单
      formData: {
        // user_id: "",
        user_name: "",
        page: 1,
        pageSize: 10,
        freeze: "",
      },
      detaile: {}, // 详情
      initTableListData: {
        // user_id: "",
        user_name: "",
        department_id: "",
        page: 1,
        pageSize: 10,
      },
      tableData: [], // 表格数据存放
      dialogVisible: false,
      // 行政区域代码
      xzqydm: [
        {
          text: "安次区",
          value: "安次区",
        },
        {
          text: "广阳区",
          value: "广阳区",
        },
        {
          text: "经济开发区",
          value: "经济开发区",
        },
        {
          text: "永清县",
          value: "永清县",
        },
        {
          text: "香河县",
          value: "香河县",
        },
        {
          text: "三河县",
          value: "三河县",
        },
        {
          text: "固安县",
          value: "固安县",
        },
        {
          text: "霸州市",
          value: "霸州市",
        },
        {
          text: "文安县",
          value: "文安县",
        },
        {
          text: "大城县",
          value: "大城县",
        },
        {
          text: "大厂回族自治县",
          value: "大厂回族自治县",
        },
      ],
      roleList: [
        {
          ro_id: "1",
          ro_name: "黄金糕",
        },
        {
          ro_id: "选项2",
          ro_name: "双皮奶",
        },
      ],
      deleteCheckedArr: [],
      // 表单校验
      rules: {
        // ex_name: "",
        // ex_department_id: "",
        // ex_card_number: "",
        // ex_password: "",
        // ex_role_id: "",
        // ex_mobile: "",
        ex_name: [
          {
            validator: ex_nameVal,
            trigger: "blur",
            required: true,
          },
        ],
        ex_password: [
          {
            validator: ex_passwordVal,
            trigger: "blur",
            required: true,
          },
        ],
        ex_mobile: [
          {
            validator: ex_mobileVal,
            trigger: "blur",
            required: true,
          },
        ],
        ex_role_id: [
          {
            validator: ex_role_idVal,
            trigger: "change",
            required: true,
          },
        ],
        ex_department_id: [
          {
            validator: ex_department_idVal,
            trigger: "change",
            required: true,
          },
        ],
      },
      resetData: {
        ex_user_id: "",
        ex_password: "123456",
      },
    };
  },
  watch: {
    $route(to, from) {
      console.log(to, from);
    },
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  created() {},
  mounted() {
    // this.initdata();
    this.initPlice();
    this.initRoleList();
    this.initPartment();
    this.initTableList();
  },

  methods: {
    // 初始化派出所列表
    initPlice() {
      department({ department_id: this.userInfo.user.department_id }).then(
        (res) => {
          // console.log(res.data);
          let list = res.data;
          if (res.code == 200) {
            if (res.data.children) {
              this.options.push({
                value: res.data.value,
                label: res.data.label,
                children: [],
              });
              res.data.children.forEach((item) => {
                this.filterPolice(item);
              });
              // console.log(list);
              this.$nextTick(() => {
                this.options[0].children = list.children;
              });
            } else {
              this.options.push({
                value: res.data.value,
                label: res.data.label,
              });
            }
          }

          // console.log(this.options);
        }
      );
    },
    filterPolice(item) {
      if (item.label.indexOf("河北省廊坊市") == 0) {
        item.label = item.label.slice(6);
        if (item.label.indexOf("公安局") == 0) {
          item.label = item.label.slice(3);
        }
      }
      if (item.children != undefined) {
        item.children.forEach((items) => {
          if (items.label.indexOf("河北省廊坊市三河市公安局") == 0) {
            items.label = items.label.slice(12);
          }
          if (items.label.indexOf("河北省廊坊市公安局大学城分局") == 0) {
            items.label = items.label.slice(14);
          }
          if (items.label.indexOf("河北省廊坊市公安局安次分局") == 0) {
            items.label = items.label.slice(13);
          }
          if (items.label.indexOf("河北省廊坊市公安局广阳分局") == 0) {
            items.label = items.label.slice(13);
          }
          if (items.label.indexOf("河北省廊坊市公安局开发区分局") == 0) {
            items.label = items.label.slice(14);
          }
          if (items.label.indexOf("河北省廊坊市大厂回族自治县公安局") == 0) {
            items.label = items.label.slice(16);
          }
          if (items.label.indexOf("河北省廊坊市固安县公安局") == 0) {
            items.label = items.label.slice(12);
          }
          if (items.label.indexOf("河北省廊坊市大城县公安局") == 0) {
            items.label = items.label.slice(12);
          }
          if (items.label.indexOf("河北省廊坊市文安县公安局") == 0) {
            items.label = items.label.slice(12);
          }
          if (items.label.indexOf("河北省廊坊市永清县公安局") == 0) {
            items.label = items.label.slice(12);
          }
          if (items.label.indexOf("河北省廊坊市霸州市公安局") == 0) {
            items.label = items.label.slice(12);
          }
          if (items.label.indexOf("河北省廊坊市香河县公安局") == 0) {
            items.label = items.label.slice(12);
          }
          // if(i)
        });
      }
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    // 初始化部门列表
    initPartment() {
      let that = this;
      this.selectId.token = this.$VueCookies.get("token");
      department({ department_id: this.userInfo.user.department_id }).then(
        (res) => {
          console.log(res);
          if (res.code == 200) {
            if (res.data.children) {
              res.data.children.forEach((item) => {
                item.label = item.label.slice(6);
                if (item.children != undefined) {
                  item.children.forEach((m) => {
                    m.label = m.label.slice(9);
                  });
                }
              });
            }
            //  else {
            //   that.optionsOne.push(res.data);
            // }
            that.optionsOne.push(res.data);
          } else if (res.code == 401) {
            alert(res.message);
          }
        }
      );
    },
    // 初始化角色列表
    initRoleList() {
      let arr = [];
      searchAdminRolePage({
        page: 1,
        pageSize: 100,
        // ro_status: 1,
        // ro_name: "",
      }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          res.data.list.forEach((item) => {
            if (item.ro_status == 1) {
              arr.push({
                ro_id: item.ro_id,
                ro_name: item.ro_name,
              });
            }
          });
          this.roleList = arr;
          console.log(arr);
        } else {
          this.$message({
            message: res.message,
            type: "error",
            duration: 2000,
          });
        }
      });
    },
    // 初始化表格列表
    initTableList() {
      let loadingInstance = Loading.service({
        target: document.querySelector(".el-table__body-wrapper"),
      });
      if (this.initTableListData.department_id == "") {
        this.initTableListData.department_id = this.userInfo.user.department_id;
      }
      searchAdminUserPage(this.initTableListData).then((res) => {
        console.log(res);
        if (res.code == 200) {
          res.data.list.forEach((item) => {
            item.re_update = this.$moment(item.re_update * 1000).format(
              "YYYY-MM-DD HH:mm:ss"
            );
            this.total = res.data.count;
          });
          this.$nextTick(() => {
            this.tableData = res.data.list;
            loadingInstance.close();
          });
        }
      });
    },
    // 选择部门
    handleChangexz(e) {
      console.log(e[e.length - 1]);
      if (e[e.length - 1] != undefined) {
        this.form.ex_department_id = e[e.length - 1];
        this.editForm.ex_department_id = e[e.length - 1];
      } else {
        this.form.ex_department_id = "";
      }
      // console.log(e.pop());
    },
    // 根据部门查询右侧表格中的用户列表
    nodeClick(data) {
      let loadingInstance = Loading.service({
        target: document.querySelector(".el-table__body-wrapper"),
      });
      console.log(data); // 点击节点的数据
      console.log("当前部门id----" + data.value);
      // let partmenRole = {
      //   page: 1,
      //   pageSize: 20,
      //   department_id: data.value,
      // };
      this.initTableListData.department_id = data.value;
      this.initTableListData.page = 1;
      this.initTableListData.pageSize = 10;
      console.log(this.initTableListData);
      searchAdminUserPage(this.initTableListData).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$message({
            showClose: false,
            message: res.message,
            type: "sucess",
          });
          this.tableData = res.data.list;
          this.total = res.data.count;
          this.currentPage = 1;
          loadingInstance.close();
        } else {
          this.$message({
            showClose: false,
            message: res.message,
            type: "warn",
          });
        }
      });
    },
    handleClose(done) {
      this.$nextTick(() => {
        this.$refs.form.resetFields();
      });
      console.log(done);
      this.addVisible = false;
      this.editVisible = false;
      console.log(this.$refs.form);
      this.form = {
        ex_name: "",
        ex_department_id: "",
        ex_card_number: "",
        ex_password: "",
        ex_role_id: "",
        // remark: "",
        ex_avatar: "",
      };
      this.imageUrl = "";
    },
    // 用户搜索
    submitForm(formData) {
      let loadingInstance = Loading.service({
        target: document.querySelector(".el-table__body-wrapper"),
      });
      console.log(formData);
      this.initTableListData.user_name = formData.user_name;
      this.initTableListData.freeze = formData.freeze;
      searchAdminUserPage(this.initTableListData).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          this.tableData = res.data.list;
          res.data.list.forEach((item) => {
            console.log(item.re_update);
            // this.$mo
            item.re_update = this.$moment(item.re_update * 1000).format(
              "YYYY-MM-DD HH:mm:ss"
            );
            this.total = res.data.count;
            if (item.ex_avatar !== null || item.ex_avatar !== "111") {
              this.$nextTick(() => {
                console.log(item.ex_avatar);
                console.log(typeof item.ex_avatar);
              });
            }
          });
          this.currentPage = 1;
          loadingInstance.close();
        }
      });

      // loadingInstance.close();
    },
    resetForm() {
      this.formData = {
        user_name: "",
        page: 1,
        pageSize: 20,
        ex_freeze: "",
      };
      this.initTableListData = {
        // user_id: "",
        freeze: "",
        user_name: "",
        department_id: "",
        page: 1,
        pageSize: 10,
      };
      this.currentPage = 1;
      this.initTableList();
    },
    // 批量删除
    deleteTtem() {
      let ywlsh = "";
      this.deleteCheckedArr.forEach((item) => {
        console.log(item);
        console.log(item.ex_user_id);
        ywlsh += "" + item.ex_user_id + "," + "";
      });
      deleteAdminUser({ ex_user_id: ywlsh }).then((res) => {
        if (res.code == 200) {
          this.$message({
            showClose: false,
            message: res.message,
            type: "success",
          });
          this.initTableList();
          this.currentPage = 1;
        }
      });
      console.log(ywlsh);
    },
    // 多选
    handleSelectionChange(val) {
      this.deleteCheckedArr = val;
      console.log(val);
    },
    // 添加用户
    addPersonnelManagement() {
      this.title = "添加用户";
      this.addVisible = !this.addVisible;
      this.imageUrl = "";
    },
    // 编辑用户
    editHandleClick(row) {
      console.log(row);
      for (const key in row) {
        if (key in this.editForm) {
          this.editForm[key] = row[key];
          console.log(row[key]);
        }
      }
      this.editForm.ex_user_id = row.ex_user_id;
      this.imageUrl = row.ex_avatar;
      console.log(this.editForm);
      this.editVisible = !this.editVisible;
    },
    changeFreezeStatus(row) {
      let that = this;
      console.log(row);
      let data = {
        ex_user_id: row.ex_user_id,
        freeze: row.ex_freeze,
      };
      changeFreeze(data).then((res) => {
        if (res.code == 200) {
          this.$message({
            showClose: true,
            message: res.message,
            type: "success",
          });
          // this.initPartment();
        } else if (res.code == 400) {
          alert(res.message);
          that.initTableList();
        }
      });
    },
    // 编辑用户确认
    editConfirm() {
      let loadingInstance = Loading.service({
        target: document.querySelector(".el-table__body-wrapper"),
      });
      console.log(this.editForm);
      // this.$refs.form.resetFields();
      editAdminUser(this.editForm).then((res) => {
        console.log(res);
        if (res.code == 200) {
          loadingInstance.close();
          this.initTableList();
          this.editVisible = false;
        }
      });
    },
    // 删除用户
    deleteItem(row) {
      console.log(row.ex_user_id);
      let data = {
        ex_user_id: row.ex_user_id,
        ex_password: 123456,
      };
      deleteAdminUser(data).then((res) => {
        if (res.code == 200) {
          this.$message({
            showClose: false,
            message: res.message,
            type: "success",
          });
          this.initTableList();
        } else {
          this.$message({
            showClose: false,
            message: res.message,
            type: "warn",
          });
        }
      });
    },
    // 头像上传
    handleAvatarSuccess(res, file) {
      console.log();
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      let that = this;

      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2M!");
      }
      return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => {
          console.log(reader.result);
          that.imageUrl = reader.result;
          if (that.addVisible) {
            console.log("新增");
            that.form.ex_avatar = reader.result;
          } else {
            console.log("编辑");
            that.editForm.ex_avatar = reader.result;
          }
        };
        reader.onerror = (error) => reject(error);
      });
      // return isJPG && isLt2M;
    },
    // resetPwd 密码重置
    resetPwd(row) {
      this.resetVisible = true;

      this.resetData.ex_user_id = row.ex_user_id;
      (this.resetData.ex_password = "123456"), console.log("set");
    },
    confirmReset() {
      this.resetVisible = false;
      editPasswrod(this.resetData).then((res) => {
        if (res.code == 200) {
          this.$message({
            showClose: false,
            message: res.message,
            type: "success",
          });
        }
      });
      console.log("重置成功");
    },
    // 添加 用户
    confirm() {
      // let loadingInstance = Loading.service({
      //   target: document.querySelector(".el-dialog"),
      // });
      console.log(this.form);
      this.$refs.form.validate((valid) => {
        if (valid) {
          addAdminUser(this.form).then((res) => {
            console.log(res);
            if (res.code == 200) {
              this.$message({
                showClose: false,
                message: res.message,
                type: "success",
              });
              // loadingInstance.close();
              this.addVisible = false;
              this.$nextTick(() => {
                this.$refs.form.resetFields();
                this.initTableList();
                this.currentPage = 1;
              });
            } else {
              this.$message({
                showClose: false,
                message: res.message,
                type: "warn",
              });
            }
          });
          // 表单校验通过，提交表单
          // console.log("表单校验通过");
        } else {
          // 表单校验失败

          console.log("表单校验失败");
        }
      });
    },

    detailHandleClick(row) {
      //详情
      let loadingInstance = Loading.service({
        target: document.querySelector(".el-dialog"),
      });
      console.log(row);
      this.dialogVisible = true;
      detailsAdminUser({ ex_user_id: row.ex_user_id }).then((res) => {
        console.log(res);
        res.data.re_update = res.data.re_update = this.$moment(
          res.data.re_update * 1000
        ).format("YYYY-MM-DD HH:mm:ss");
        this.detaile = res.data;
        loadingInstance.close();
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val;
      this.initTableListData.pageSize = val;
      this.initTableListData.page = 1;
      this.currentPage = 1;
      console.log(this.initTableListData);
      this.initTableList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      console.log(this.initTableListData);
      // this.currentPage = val;
      // console.log(`当前页: ${val}`);
      // console.log(this.tableData.length);
      // console.log(this.pageSize);
      this.initTableListData.page = val;
      this.initTableList();
      this.currentPage = val;
      // console.log(`当前页: ${val}`);  // 分页功能
      // // if(val == )
      // console.log(this.tableData.length / this.pageSize);
      // console.log(Math.ceil(this.tableData.length / this.pageSize));
      // if (Math.ceil(this.tableData.length / this.pageSize) == val) {
      //   console.log("最后一页");
      //   this.searchData.pagesize = parseInt(this.searchData.pagesize) + 20;
      //   this.initdata();
      // }
      // this.currentPage = val;
    },
  },
};
</script>
<style scoped lang="scss">
.content {
  display: flex;
  height: 100%;
}

.content > div:nth-of-type(2) {
  flex: 1;
}
.vue-treeselect {
  width: 220px;
}
.contnet-left {
  width: 240px !important;
  // border: 1px red solid;
  height: 100%;
  background-color: #ffffff;
  margin: 0px 10px 0 -10px;
  padding: 10px 10px 0 10px;
  box-sizing: border-box;
  /deep/.is-leaf {
    border: none !important;
  }
}
#punch {
  /deep/.el-form-item__content {
    margin-left: 0px !important;
  }
}
.people {
  // border: 1px red solid;
  padding: 10px;
  background-color: white;
  border-radius: 10px;
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-content: center;
  justify-content: space-around;
  align-items: flex-start;
  box-sizing: border-box;
}

// .people {
//   width: calc(100%);
// }
// .auto-width {
//   width: "auto";
// }
.el-table {
  width: calc(100%);
}
.people /deep/ .el-form-item__content {
  border: none;
  width: auto;
  padding-left: 20px;
}
/deep/.el-form-item__label {
  // border: 1px red solid;
  width: 80px !important;
  text-align: right;
  padding-right: 0;
}
.punch-content {
  margin-top: 20px;
  // border: 1px red solid;
  height: auto;
  background-color: white;
  border-radius: 10px;
  padding: 10px;
  box-sizing: border-box;
}

.el-table .el-table__cell {
  padding: 12px 0;
  min-width: 0;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: center;
}
.upIpfo {
  display: flex;
  width: 100%;
  // border: 1px red solid;
  justify-content: space-between;
}
/deep/.imgPhoto {
  display: inline;
  vertical-align: text-top !important;
}
.upIpfo p {
  color: #13213b;
  font-size: 14px;
  font-weight: 400;
  width: 50%;
  margin-top: 10px;
  // border: 1px red solid;
  display: inline-block;
  // background-color: skyblue;
}
/deep/.el-table__header-wrapper {
  // border: 1px red solid !important;
  border-radius: 10px 10px 0 0;
}
/deep/.el-table {
  border: 1px #d7dbe3 solid;
  border-radius: 10px;
}
/deep/.has-gutter tr th {
  color: black;
  text-align: center;
  border: 1px d7dbe3 solid;
  background-color: #ecf5ff;
}

/deep/.is-leaf {
  border: 1px #d7dbe3 solid !important;
  border-top: none !important;
  border-left: none !important;
}
/deep/.el-table__cell {
  text-align: center !important;
}

/deep/.el-dialog {
  border-radius: 15px !important;
  height: 470px;
}
/deep/.el-dialog__header {
  text-align: left;
  font-weight: 600;
}
/deep/.el-dialog__body {
  padding: 0 20px 20px 20px !important;
}
/deep/.el-input__inner {
  border: 1px solid #d7dbe3 !important;
  background-color: white !important;
}
/deep/.el-input__inner {
  border: 1px solid #d7dbe3 !important;
  background-color: white !important;
  border-radius: 6px !important;
}
#dialog {
  div:nth-of-type(1) {
    /deep/.el-dialog {
      height: 230px;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  div:nth-of-type(2) {
    /deep/.el-dialog {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  div:nth-of-type(3) {
    /deep/.el-dialog {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  div:nth-of-type(4) {
    /deep/.el-dialog {
      height: 180px;
      color: red !important;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
.rowText {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  /*第几行裁剪*/
  -webkit-box-orient: vertical;
}
.content-top {
  text-align: left;
  margin-bottom: 10px;
}
.content-top .el-button {
  width: 108px;
  height: 36px;
  background: #126bff;
  border-radius: 6px;
  opacity: 1;
  border: none;
}
.content-top .el-button:nth-of-type(2) {
  width: 108px;
  height: 36px;
  background: #ff4444;
  border-radius: 6px;
  opacity: 1;
}
/deep/.avatar-uploader .el-upload {
  border: 1px solid #d7dbe3;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
/deep/.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
/deep/.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
.item {
  display: flex;
  flex-direction: row;
  align-content: center;
  justify-content: center;
  align-items: center;
  width: 100%;
  /deep/.el-form-item {
    width: 50%;
    margin-right: 10px;
  }
  /deep/.el-form-item__content {
    margin-left: 80px !important;
  }
}
/deep/.item .el-input {
  width: 336px;
}
::v-deep.el-table th.el-table__cell {
  background-color: #ecf5ff !important;
  width: 64px !important;
  height: 21px !important;
  font-size: 16px !important;
  color: #13213b !important;
}
</style>
